<template>
  <div class="app-container">
    <div>
      <div class="top">
        <span>活动编辑</span>
        <div />
      </div>
      <el-row :span="24" justify="start" type="flex">
        <el-col :span="10">
          <div class="title">
            <p class="font">活动名称</p>
            <el-input
              v-model="form.activityName"
              style="width: 500px"
              placeholder="请输入"
            ></el-input>
          </div>
          <div class="title">
            <p class="font">banner图</p>
            <imageUpload
              @input="save"
              @deleteData="deleteImg"
              :value="commonFileRequests"
              :limit="1"
              :urltype="'1'"
              :FileType="'STUDENT'"
            ></imageUpload>
          </div>
          <div class="title">
            <p class="font">活动地址</p>
            <el-input
              v-model="form.activityAddr"
              style="width: 500px"
              placeholder="请输入"
            ></el-input>
          </div>
          <div class="title"> 
            <p class="font">报名时间</p>
            <el-date-picker
              v-model="enrollTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="chooseTime('enrollTime')"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div class="title">
            <p class="font">活动时间</p>
            <el-date-picker
              v-model="activityTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="chooseTime('activityTime')"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"  
            >
            </el-date-picker>
          </div>
          <div class="title">
            <p class="font">活动详情</p>
            <el-input
              v-model="form.activityIntroduce"
              placeholder="请输入"
              clearable
              style="width: 500px"
              type="textarea"
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 8 }"
            />
          </div>
        </el-col>
      </el-row>
      <div class="button">
        <el-button size="medium" @click="reset">重置</el-button>
        <el-button type="primary" size="medium" @click="submit"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { editActivity, activityUp } from "@/api/society";
export default {
  data() {
    return {
      // 表单参数
      form: {
        activityName: "",
        schoolNo: "",
        activityIntroduce: "",
        activityAddr: "",
        userPhone: "",
        activityBeginTime: "",
        activityEndTime: "",
        commonFileRequests: [],
        delCommonFileRequests: [],
        registrationBeginTime: "",
        registrationEndTime: "",
        activityNo: "",
      },
      //活动图片
      commonFileRequests: [],
      //删除的活动图片
      delCommonFileRequests: [],
      //活动时间
      activityTime: [],
      // 报名时间
      enrollTime: [],
      //选中的活动id
      chooseId: this.$route.query.key,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      const params = this.chooseId;
      editActivity(params).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.activityTime.push(res.data.activityBeginTime);
          this.activityTime.push(res.data.activityEndTime);
          this.enrollTime.push(res.data.registrationBeginTime);
          this.enrollTime.push(res.data.registrationEndTime);
          this.commonFileRequests = res.data.commonFileRequests;
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        activityName: "",
        schoolNo: "",
        activityAddr: "",
        activityIntroduce: "",
        userPhone: "",
        activityBeginTime: "",
        activityEndTime: "",
        commonFileRequests: [],
        delCommonFileRequests: [],
        registrationBeginTime: "",
        registrationEndTime: "",
        activityNo: "",
      };
      (this.commonFileRequests = []), (this.delCommonFileRequests = []);
    },
    //上传详情图片
    save(data) {
      this.form.commonFileRequests = [];
      this.commonFileRequests = data;
      if (this.commonFileRequests.length > 1) {
        this.form.commonFileRequests = this.commonFileRequests;
      } else {
        this.form.commonFileRequests.push(data[0]);
      }
    },
    //删除详情图片
    deleteImg(data) {
      this.delCommonFileRequests.push(data);
      this.form.delCommonFileRequests = this.delCommonFileRequests;
    },
    // 获取时间
    chooseTime(data) {
      if (data == "activityTime") {
        this.form.activityBeginTime = this.activityTime[0];
        this.form.activityEndTime = this.activityTime[1];
      } else if (data == "enrollTime") {
        this.form.registrationBeginTime = this.enrollTime[0];
        this.form.registrationEndTime = this.enrollTime[1];
      }
    },
    /** 提交按钮 */
    submit() {
      //时间判断
      if(Date.parse(this.form.registrationEndTime) > Date.parse(this.form.activityEndTime)){
            this.$message({
              message: '报名结束时间必须要在活动结束时间之前',
              type: 'error'
            });
            return
          }else if(Date.parse(this.form.activityBeginTime) < Date.parse(this.form.registrationBeginTime)){
            this.$message({
              message: '报名开始时间必须要在活动开始时间之前',
              type: 'error'
            });
            return
          }
      let params = {
        ...this.form,
      };
      activityUp(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "上传信息成功",
            type: "success",
          });
          this.$router.push({ path: "/society/activity" });
        } else {
          this.$message.error("上传失败");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table::before {
  left: 0;
  bottom: 0;
  width: 30%;
  height: 1px;
}
.app-container {
  padding: 24px;
  background-color: #f5f5f5;
}
.app-container > div {
  background-color: white;
  padding: 24px;
}
.top {
  display: flex;
  margin: 40px 0px 40px 56px;
}
.top > span {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  margin-left: 8px;
  width: 90px;
}
.font{
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  color: #4F5570;
}
.top > div {
  border-bottom: 1px solid #e5e5e5;
  height: 15px;
  width: 100%;
  padding-bottom: -20px;
  margin-left: 15px;
}
.top::before {
  content: "";
  width: 3px;
  background: #2854b7;
  height: 20px;
  border-radius: 2px;
}
.title,
.button,
.image,
.label {
  margin-left: 70px;
  margin-bottom: 30px;
}
.constitution {
  margin-left: 70px;
}
.button el-button:first-child() {
  width: 80px;
  line-height: 20px;
  height: 40px;
}
.button el-button:last-child() {
  margin-left: 30px;
  width: 110px;
  height: 40px;
  border: none;
}
</style>
